<template>
  <div class="bottom-box top-line">
    <div
      class="bottom-div"
      v-for="(item, index) in tabbarArr"
      :key="index"
      @click="selectBtn(index)"
    >
      <router-link :to="item.path" style="color: #999">
        <div v-if="curr == index" class="bottom-image">
          <img :src="item.srcB" alt />
        </div>
        <div v-else class="bottom-image">
          <img :src="item.src" alt />
        </div>
        <div :class="{'select-color':curr == index}" class="bottom-text">{{item.textInfo}}</div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabbarArr: [
        {
          src: require("../assets/image/index.png"),
          srcB: require("../assets/image/index-select.png"),
          textInfo: "首页",
          path: "/",
        },
        {
          src: require("../assets/image/myApply.png"),
          srcB: require("../assets/image/myApply-select.png"),
          textInfo: "我的申请",
          path: "/myapply",
        },
        {
          src: require("../assets/image/userCenter.png"),
          srcB: require("../assets/image/userCenter-select.png"),
          textInfo: "个人中心",
          path: "/myinfo",
        },
      ],
      curr: 0,
    };
  },
  methods: {
    selectBtn(index) {
      this.curr = index;
    },
  },
  created() {
      let pathname = window.location.hash.split('#')[1];
      switch(pathname) {
          case "/":
              this.curr = 0;
              break;
          case "/myapply":
              this.curr = 1;
              break;
          case "/myinfo":
              this.curr = 2;
              break;
      }
  }
};
</script>

<style lang="stylus" scoped>
@import './../assets/styl/mixin.styl'
.top-line
  border-top 1px solid $tabBarline
.select-color
  color $baseColor
.bottom-box
  width 100%
  height rem(49)
  display flex
  justify-content space-around
  flex-flow row wrap
  position fixed
  bottom 0
  background $infoColor
  z-index 9
  .bottom-div
    align-self center
    display flex
    flex-direction column
    .bottom-image
      width rem(24)
      height rem(24)
      margin 0 auto
      img
        width 100%
        height 100%
    .bottom-text
      margin-top rem(2)
      font-size rem(10)
</style>